<template>
    <section class="cicd-views">
        <el-table :data="deploymentItems" highlight-current-row   style="width: 100%;" border
                  :row-style="rowStyle"
                  :header-row-style="headerStyle"
                  header-cell-class-name="bg-card"

        >
            <el-table-column prop="laststatus" label="S" width="40" >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.laststatus==='成功'">
                        <el-tooltip class="item" effect="light" content="成功" placement="right">
                            <i class="fa fa-circle" style="font-size:18px;color: green"></i>
                        </el-tooltip>
                    </div>
                    <div v-else-if="scope.row.laststatus==='失败'">
                        <!--<el-tag type="danger"  size="mini"> {{scope.row.laststatus}} </el-tag>-->
                        <el-tooltip class="item" effect="light" content="失败" placement="right">
                            <i class="fa fa-circle" style="font-size:15px;color: red"></i>
                        </el-tooltip>
                    </div>
                    <div v-else>
                        <el-tooltip class="item" effect="light" content="未构建" placement="right">
                            <i class="fa fa-circle" style="font-size:18px;color: gray"></i>
                        </el-tooltip>
                    </div>
                </template>

            </el-table-column>

            <el-table-column prop="name" label="项目名" width="200" >
                <template slot-scope="scope">
                    <el-link :href="'#/deploy/item/' + scope.row.name + '/detail' "  type="primary" :underline="false" >{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column  prop="deploymode" label="部署方式" width="150" >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.deploymode==='ansible'">
                        <el-tag  type="success" size="mini" hit> {{scope.row.deploymode}} </el-tag>
                    </div>
                    <div v-else-if="scope.row.deploymode==='k8s'">
                        <el-tag type="warning"  size="mini" hit> {{scope.row.deploymode}} </el-tag>
                    </div>
                </template>

            </el-table-column>

            <el-table-column prop="lastsuccess" label="上次成功" width="250">
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.lastsuccess!==''">
                        {{scope.row.lastsuccess}}
                    </div>
                    <div v-else>
                        无
                    </div>
                </template>



            </el-table-column>
            <el-table-column prop="lastfail" label="上次失败" width="250"   >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.lastfail!==''">
                        {{scope.row.lastfail}}
                    </div>
                    <div v-else>
                        无
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="lastdurtime" label="上次持续时间" width="120" >
                <template slot-scope="scope">
                    <!--<el-tag :type="scope.row.laststatus=='成功'? 'success': 'danger'"  :style="scope.row.laststatus=='成功'? 'color:green': 'color:red'" size="mini">{{ scope.row.laststatus }}</el-tag>-->
                    <div v-if="scope.row.lastdurtime!==0">
                        {{scope.row.lastdurtime}}
                    </div>
                    <div v-else>
                        无
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作"  width="100">
                <template scope="scope">
                    <el-button type="text"   @click="startDeploy(scope.$index, scope.row)" style="margin-right: 20px"><i class="el-icon-video-play" style="font-size:20px"></i></el-button>
                    <el-popover
                            placement="right"
                            width="50"
                            trigger="click">
                        <div>
                            <el-button  type="text" size="mini" @click="linkToConfigEdit(scope.$index, scope.row)" >配置</el-button>
                        </div>
                        <div>
                            <el-button  type="text" size="mini" @click="deleteItem(scope.$index, scope.row)" style="color: red">删除</el-button>
                        </div>
                        <div>
                            <el-button  type="text" size="mini" @click="linkToWorkspace(scope.$index, scope.row)">工作空间</el-button>
                        </div>
                        <el-button slot="reference"  type="text"  ><i class="fa fa-ellipsis-v" style="font-size:20px"></i></el-button>
                    </el-popover>


                </template>
            </el-table-column>

            <el-table-column label="进度"  fit>
                <template scope="scope">
                    <template v-if="!!progressData[scope.row.name]" >
                        <el-progress :percentage="progressData[scope.row.name].precent" color="#99CCFF" v-if="progressData[scope.row.name].status" :show-text="false"></el-progress>
                    </template>
                    <div v-else>暂未发布</div>
                </template>

            </el-table-column>



        </el-table>
    </section>
</template>

<script>
    import { getViewItems,LoadProgressData,DeleteItem,StartDeploy } from '../../api/api'
    export default {
        props: {
            viewName: String,
        },
        data() {
            return {
                deploymentItems: [],
                progressData: {},

            }
        },
        methods: {
            getViewDeployItems(){
                let param = {name:this.viewName}
                getViewItems(param).then((res) => {
                        console.log(res.items)
                        this.deploymentItems = res.items
                    }
                )
            },
            getProgressData(){
                let self = this
                LoadProgressData().then((res) => {
                        console.log(res.data)

                        if ( res.data.visible) {
                            console.log(" here ",res.data.progressResult)
                            self.progressData = JSON.parse(res.data.progressResult)
                        } else {
                            self.progressData = {}
                        }
                        //self.progressData = JSON.parse(res.data.progressResult)
                        //setTimeout(this.getProgressData, 3000)
                    }
                )
            },
            linkToConfigEdit(index,row) {
                this.$router.push('/deploy/item/' + row.name + '/config')
            },
            deleteItem(index,row){
                let self = this
                let param = {name: row.name,yamlpath: row.yamlpath}

                console.log("delete item: " , row.name)
                console.log("index : " , index)

                this.$confirm('此操作将永久删除该项目, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',

                }).then(() => {
                    DeleteItem(param).then((res) => {
                        console.log("the delete result code :" , res.code)
                        if (res.code === 200) {
                            console.log("the delete result :" , res)
                            console.log("the delete result :" , this.deploymentItems)
                            self.deploymentItems.splice(index,1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                        }
                    })


                }).catch(() => {

                });

            },
            linkToWorkspace(index,row) {
                this.$router.push('/deploy/item/' + row.name + '/workspace')
            },
            startDeploy(index,row){
                this.getProgressData()   //每次构建都刷新下  是否能异步
                console.log("start deploy row :" , row)
                console.log("start deploy :" , row.name)

                StartDeploy(row).then((res) => {
                    console.log("start result",res)
                    if (res.code===400) {
                        this.$message({
                                message: res.message,
                                type: 'error',
                                duration: 2000,
                            }
                        );
                    }
                })
            },

            rowStyle({ row, rowIndex}) {
                return 'height:10px; background-color: #FAFAFA;'
                // return ''
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;background-color: #FAFAFA;"
            },

        },
        mounted() {
            console.log(this.viewName)
            this.getViewDeployItems()
            this.getProgressData()
        }
    }
</script>

<style >
    .cicd-views .bg-card {
        background-color: #FAFAFA;
    }
    .cicd-views .el-table__empty-block {
        background-color: #FAFAFA;
        height: 40px;
        font-weight: bold;
    }
</style>